<template>
  <div class="teacher-management-container">
    <!-- 页面标题和状态区域 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">
          <span class="title-icon">👨‍🏫</span>
          {{ isAdmin ? '教师信息管理' : '我的教师信息' }}
        </h1>
        <div class="header-stats" v-if="isAdmin">
          <div class="stat-badge">
            <span class="stat-number">{{ teachers.length }}</span>
            <span class="stat-label">教师</span>
          </div>
          <div class="stat-badge">
            <span class="stat-number">{{ selectedTeachers.length }}</span>
            <span class="stat-label">已选择</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作区域 -->
    <div class="header-actions" v-if="isAdmin">
      <div class="left-actions">
        <el-button type="primary" @click="showAddDialog" class="action-btn add-btn">
          <el-icon><Plus /></el-icon>添加教师
        </el-button>
        <el-button 
          type="danger" 
          @click="handleBatchDelete" 
          v-if="selectedTeachers.length > 0"
          class="action-btn batch-btn"
        >
          <el-icon><Delete /></el-icon>批量删除 ({{ selectedTeachers.length }})
        </el-button>
      </div>
    </div>



    <!-- 内容区域 -->
    <div class="content-section">
      <div v-loading="loading" class="loading-wrapper">
        <!-- 管理员表格视图 -->
        <div v-if="isAdmin" class="admin-table-container">
          <el-card class="table-card" shadow="never">
            <el-table
              :data="filteredTeachers"
              style="width: 100%"
              stripe
              border
              empty-text="暂无教师数据"
              @selection-change="handleSelectionChange"
              class="modern-table"
            >
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column prop="teaId" label="工号" width="100" align="center">
                <template #default="scope">
                  <el-tag type="primary" size="small">{{ scope.row.teaId }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="teaName" label="姓名" width="120" align="center">
                <template #default="scope">
                  <div class="name-cell">
                    <el-avatar :size="32" :src="`https://api.dicebear.com/7.x/avataaars/svg?seed=${scope.row.teaName}`">
                      {{ scope.row.teaName.charAt(0) }}
                    </el-avatar>
                    <span class="name-text">{{ scope.row.teaName }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="teaAge" label="年龄" width="80" align="center">
                <template #default="scope">
                  <el-tag type="info" size="small">{{ scope.row.teaAge }}岁</el-tag>
                </template>
              </el-table-column>

              <el-table-column prop="teaCalss" label="所授班级" width="150" align="center">
                <template #default="scope">
                  <el-tag type="warning" size="small">{{ scope.row.teaCalss || '未填写' }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="teaPhone" label="手机号" width="130" align="center" show-overflow-tooltip />
              <el-table-column prop="teaAddress" label="家庭住址" width="200" align="center" show-overflow-tooltip />
              <el-table-column prop="teaEmail" label="邮箱" width="200" align="center" show-overflow-tooltip />

              <el-table-column label="操作" width="200" fixed="right" align="center">
                <template #default="scope">
                  <el-button-group>
                    <el-button 
                      size="small" 
                      type="primary"
                      @click="showEditDialog(scope.row)" 
                      v-if="canEdit(scope.row)"
                      class="table-action-btn"
                    >
                      <el-icon><Edit /></el-icon>
                    </el-button>
                    <el-button 
                      size="small" 
                      type="info" 
                      @click="showViewDialog(scope.row)" 
                      v-if="!canEdit(scope.row)"
                      class="table-action-btn"
                    >
                      <el-icon><View /></el-icon>
                    </el-button>
                    <el-button 
                      size="small" 
                      type="danger" 
                      @click="handleDelete(scope.row.id)" 
                      v-if="isAdmin"
                      class="table-action-btn"
                    >
                      <el-icon><Delete /></el-icon>
                    </el-button>
                  </el-button-group>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
        
        <!-- 普通用户卡片视图 -->
        <div v-else class="user-cards-container">
          <transition name="fade">
            <div v-if="filteredTeachers.length === 0" class="empty-state modern">
              <div class="empty-icon">👨‍🏫</div>
              <h3 class="empty-title">暂无教师数据</h3>
              <p class="empty-description">请联系管理员添加教师信息</p>
            </div>
          </transition>
          
          <transition-group name="card-list" tag="div" class="teacher-cards-grid">
            <div v-for="teacher in filteredTeachers" :key="teacher.id" class="teacher-card modern">
              <div class="card-overlay"></div>
              
              <!-- 卡片头部 -->
              <div class="card-header modern">
                <div class="teacher-avatar-section">
                  <el-avatar 
                    :size="80" 
                    :src="`https://api.dicebear.com/7.x/avataaars/svg?seed=${teacher.teaName}`"
                    class="teacher-avatar-large"
                  >
                    {{ teacher.teaName.charAt(0) }}
                  </el-avatar>
                  <div class="avatar-ring"></div>
                </div>
                <div class="teacher-basic-info">
                  <h3 class="teacher-name-large">{{ teacher.teaName }}</h3>
                  <div class="teacher-id-badge">
                    <el-tag type="primary" size="small" class="id-tag">
                      工号: {{ teacher.teaId }}
                    </el-tag>
                  </div>
                </div>
              </div>
              
              <!-- 卡片内容 -->
              <div class="card-content modern">
                <div class="info-grid">
                  <div class="info-item modern">
                    <div class="info-icon age">🎂</div>
                    <div class="info-details">
                      <span class="info-label">年龄</span>
                      <span class="info-value">{{ teacher.teaAge }}岁</span>
                    </div>
                  </div>
                  

                  
                  <div class="info-item modern">
                    <div class="info-icon class">🏫</div>
                    <div class="info-details">
                      <span class="info-label">所授班级</span>
                      <span class="info-value">{{ teacher.teaCalss || '未填写' }}</span>
                    </div>
                  </div>
                  
                  <div class="info-item modern">
                    <div class="info-icon phone">📱</div>
                    <div class="info-details">
                      <span class="info-label">手机号</span>
                      <span class="info-value">{{ teacher.teaPhone || '未填写' }}</span>
                    </div>
                  </div>
                  
                  <div class="info-item modern">
                    <div class="info-icon email">📧</div>
                    <div class="info-details">
                      <span class="info-label">邮箱</span>
                      <span class="info-value">{{ teacher.teaEmail || '未填写' }}</span>
                    </div>
                  </div>
                  
                  <div class="info-item modern wide">
                    <div class="info-icon address">🏠</div>
                    <div class="info-details">
                      <span class="info-label">家庭住址</span>
                      <span class="info-value">{{ teacher.teaAddress || '未填写' }}</span>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 卡片操作按钮 -->
              <div class="card-actions modern">
                <el-button 
                  type="primary" 
                  size="default" 
                  @click="showEditDialog(teacher)" 
                  v-if="canEdit(teacher)"
                  class="card-action-btn edit-btn"
                >
                  <el-icon><Edit /></el-icon>
                  编辑信息
                </el-button>
                <el-button 
                  type="info" 
                  size="default" 
                  @click="showViewDialog(teacher)"
                  v-if="!canEdit(teacher)"
                  class="card-action-btn view-btn"
                >
                  <el-icon><View /></el-icon>
                  查看详情
                </el-button>
                <el-button 
                  type="danger" 
                  size="default" 
                  @click="handleDelete(teacher.id)"
                  v-if="isAdmin"
                  class="card-action-btn delete-btn"
                >
                  <el-icon><Delete /></el-icon>
                  删除
                </el-button>
              </div>
            </div>
          </transition-group>
        </div>
      </div>
    </div>

    <!-- 添加/编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="isEdit ? '编辑教师信息' : '添加教师信息'"
      width="600px"
    >
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="工号" prop="teaId">
              <el-input v-model="form.teaId" placeholder="请输入工号" :disabled="isEdit && !isAdmin" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="teaName">
              <el-input v-model="form.teaName" placeholder="请输入姓名" :disabled="isEdit && !isAdmin" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="年龄" prop="teaAge">
              <el-input-number v-model="form.teaAge" :min="1" :max="100" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="所授班级" prop="teaCalss">
          <el-input v-model="form.teaCalss" placeholder="请输入所授班级" />
        </el-form-item>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="手机号" prop="teaPhone">
              <el-input v-model="form.teaPhone" placeholder="请输入手机号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="teaEmail">
              <el-input v-model="form.teaEmail" placeholder="请输入邮箱" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="家庭住址" prop="teaAddress">
          <el-input v-model="form.teaAddress" placeholder="请输入家庭住址" />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>



    <!-- 查看对话框 -->
    <el-dialog
      v-model="viewDialogVisible"
      title="查看教师信息"
      width="600px"
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="工号">{{ viewForm.teaId }}</el-descriptions-item>
        <el-descriptions-item label="姓名">{{ viewForm.teaName }}</el-descriptions-item>
        <el-descriptions-item label="年龄">{{ viewForm.teaAge }}</el-descriptions-item>

        <el-descriptions-item label="所授班级">{{ viewForm.teaCalss }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ viewForm.teaPhone }}</el-descriptions-item>
        <el-descriptions-item label="家庭住址">{{ viewForm.teaAddress }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ viewForm.teaEmail }}</el-descriptions-item>
      </el-descriptions>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="viewDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Edit, Check, View, Delete } from '@element-plus/icons-vue'
import axios from 'axios'
import { permissions, fetchPermissions } from '@/utils/permissions'

export default {
  name: 'TeacherManagement',
  setup() {
    const loading = ref(false)
    const teachers = ref([])

    const selectedTeachers = ref([])
    // 管理员表格需要选择功能
    const dialogVisible = ref(false)
    const isEdit = ref(false)
    const formRef = ref()

    const form = reactive({
      id: null,
      teaId: '',
      teaName: '',
      teaAge: 25,
      teaCalss: '',
      teaPhone: '',
      teaAddress: '',
      teaEmail: ''
      })

    // 查看相关
    const viewDialogVisible = ref(false)
    const viewForm = reactive({
      id: null,
      teaId: '',
      teaName: '',
      teaAge: 25,
      teaCalss: '',
      teaPhone: '',
      teaAddress: '',
      teaEmail: ''
    })

    // 获取当前用户信息
    const userRole = localStorage.getItem('role') || 'teacher'
    const currentUserId = localStorage.getItem('userId')
    const currentUsername = localStorage.getItem('username')
    const isAdmin = computed(() => userRole === 'admin')

    const rules = {
      teaId: [
        { required: true, message: '请输入工号', trigger: 'blur' }
      ],
      teaName: [
        { required: true, message: '请输入姓名', trigger: 'blur' }
      ],
      teaAge: [
        { required: true, message: '请输入年龄', trigger: 'blur' }
      ]
    }

    const filteredTeachers = computed(() => {
      let filteredData = teachers.value
      
      // 如果不是管理员，只显示当前用户的数据
      if (!isAdmin.value) {
        filteredData = teachers.value.filter(teacher => 
          teacher.teaName === currentUsername || teacher.teaId === currentUsername
        )
      }
      
      return filteredData
    })

    const fetchTeachers = async () => {
      loading.value = true
      try {
        // 首先获取全局权限信息
        await fetchPermissions()
        console.log('获取到的全局权限信息:', permissions.permissionData)
        
        // 然后获取教师详细信息（不分页）
        const teacherResponse = await axios.get('/api/teacher/listAll')
        
        if (teacherResponse.data.code === 1) {
          teachers.value = teacherResponse.data.data
          console.log('教师数据:', teachers.value)
        }
      } catch (error) {
        ElMessage.error('获取教师列表失败')
        console.error(error)
      } finally {
        loading.value = false
      }
    }

    const showAddDialog = () => {
      isEdit.value = false
      resetForm()
      dialogVisible.value = true
    }

    const showEditDialog = (teacher) => {
      isEdit.value = true
      Object.assign(form, teacher)
      dialogVisible.value = true
    }

    const resetForm = () => {
      Object.assign(form, {
        id: null,
        teaId: '',
        teaName: '',
        teaAge: 25,
        teaCalss: '',
        teaPhone: '',
        teaAddress: '',
        teaEmail: ''
      })
    }

    const handleSubmit = async () => {
      if (!formRef.value) return
      
      await formRef.value.validate(async (valid) => {
        if (valid) {
          try {
            if (isEdit.value) {
              await axios.post('/api/teacher/updateById', form)
              ElMessage.success('更新成功')
            } else {
              // 添加教师时，设置状态为待审批
              const addForm = { ...form, status: 'pending' }
              await axios.post('/api/teacher/save', addForm)
              ElMessage.success('添加成功，等待管理员审批')
            }
            dialogVisible.value = false
            fetchTeachers()
          } catch (error) {
            ElMessage.error(error.response?.data?.message || '操作失败')
          }
        }
      })
    }

    const handleDelete = async (id) => {
      try {
        await ElMessageBox.confirm('确定要删除这个教师吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        await axios.delete('/api/teacher/removeById', {
          params: { id }
        })
        ElMessage.success('删除成功')
        fetchTeachers()
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('删除失败')
        }
      }
    }



    // 管理员表格需要批量删除功能
    const handleBatchDelete = async () => {
      try {
        await ElMessageBox.confirm(
          `确定要批量删除选中的 ${selectedTeachers.value.length} 个教师吗？此操作不可恢复！`,
          '警告',
          {
            confirmButtonText: '确定删除',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
        
        const ids = selectedTeachers.value.map(teacher => teacher.id)
        await axios.delete('/api/teacher/removeByIds', {
          params: { ids }
        })
        ElMessage.success('批量删除成功')
        selectedTeachers.value = []
        fetchTeachers()
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('批量删除失败')
        }
      }
    }

    // 管理员表格需要选择功能
    const handleSelectionChange = (selection) => {
      selectedTeachers.value = selection
    }



    const showViewDialog = (teacher) => {
      Object.assign(viewForm, teacher)
      viewDialogVisible.value = true
    }

    // 权限控制方法
    const canEdit = (teacher) => {
      console.log('权限检查开始');
      console.log('当前用户角色:', userRole);
      console.log('当前用户名:', currentUsername);
      console.log('教师信息:', teacher);
      console.log('全局权限状态:', permissions.permissionData);

      // 管理员可以编辑所有教师信息
      if (isAdmin.value) {
        console.log('是管理员，允许编辑');
        return true;
      }

      // 检查是否是自己的信息
      const isOwnInfo = teacher.teaName === currentUsername || teacher.teaId === currentUsername;
      console.log('是否是自己的信息:', isOwnInfo);

      // 检查是否有教师编辑权限
      const hasTeacherEditPermission = permissions.hasTeacherEditPermission();
      console.log('是否有教师编辑权限:', hasTeacherEditPermission);

      // 检查是否有个人资料编辑权限
      const hasProfileEditPermission = permissions.hasProfileEditPermission();
      console.log('是否有个人资料编辑权限:', hasProfileEditPermission);

      // 同时满足：是自己的信息 且 有所需的权限
      const canEditResult = isOwnInfo && hasTeacherEditPermission && hasProfileEditPermission;
      console.log('最终是否可以编辑:', canEditResult);

      return canEditResult;
    }








    // 无分页，移除分页事件处理

    onMounted(() => {
      fetchTeachers()
    })

    return {
      loading,
      teachers,

      selectedTeachers, // 管理员表格需要选择功能
      dialogVisible,
      isEdit,
      formRef,
      form,
      rules,
      filteredTeachers,
      viewDialogVisible,
      viewForm,
      isAdmin,
      showAddDialog,
      showEditDialog,
      showViewDialog,
      handleSubmit,
      handleDelete,
      handleBatchDelete, // 管理员表格需要批量删除功能
      handleSelectionChange, // 管理员表格需要选择功能

      
      canEdit,
    }
  }
}
</script>

<style scoped>
/* 基础容器样式 */
.teacher-management-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow-x: hidden;
}

.teacher-management-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120, 119, 198, 0.2) 0%, transparent 50%);
  pointer-events: none;
}

/* 页面头部样式 */
.page-header {
  position: relative;
  z-index: 10;
  padding: 30px 40px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 0 0 30px 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

.page-title {
  font-size: 32px;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-icon {
  font-size: 36px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.header-stats {
  display: flex;
  gap: 20px;
}

.stat-badge {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 20px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  transform: translateY(0);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
}

.stat-number {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.stat-label {
  display: block;
  font-size: 12px;
  opacity: 0.9;
  margin-top: 4px;
}

/* 操作区域样式 */
.header-actions {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 20px;
  margin: 0 40px 30px 40px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.left-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

.action-btn {
  padding: 12px 24px;
  border-radius: 16px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.add-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.batch-btn {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: white;
}

.batch-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(231, 76, 60, 0.4);
}

/* 内容区域样式 */
.content-section {
  position: relative;
  z-index: 5;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

.loading-wrapper {
  min-height: 400px;
}

/* 管理员表格样式 */
.admin-table-container {
  margin-bottom: 40px;
}

.table-card {
  border: none;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
}

.modern-table {
  border-radius: 16px;
  overflow: hidden;
}

.modern-table .el-table__header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.modern-table .el-table__header th {
  background: transparent;
  color: #495057;
  font-weight: 600;
  font-size: 14px;
  border-bottom: 2px solid #dee2e6;
  padding: 16px 12px;
}

.modern-table .el-table__body td {
  padding: 12px;
  vertical-align: middle;
}

.modern-table .el-table__row:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.name-text {
  font-weight: 600;
  color: #303133;
}

.table-action-btn {
  border-radius: 8px;
  transition: all 0.3s ease;
  border: none;
  font-weight: 600;
}

.table-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 用户卡片视图样式 */
.user-cards-container {
  margin-bottom: 40px;
}

.teacher-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.teacher-card.modern {
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 30px;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transform: translateY(0) scale(1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.teacher-card.modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 24px 24px 0 0;
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.02) 0%, rgba(118, 75, 162, 0.02) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 24px;
}

.teacher-card.modern:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 60px rgba(102, 126, 234, 0.2);
  border-color: rgba(102, 126, 234, 0.3);
}

.teacher-card.modern:hover .card-overlay {
  opacity: 1;
}

/* 卡片头部样式 */
.card-header.modern {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e9ecef;
}

.teacher-avatar-section {
  position: relative;
}

.teacher-avatar-large {
  border: 4px solid white;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
}

.avatar-ring {
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  background-clip: border-box;
  z-index: -1;
}

.teacher-basic-info {
  flex: 1;
}

.teacher-name-large {
  font-size: 24px;
  font-weight: 700;
  color: #303133;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.teacher-id-badge {
  margin-top: 8px;
}

.id-tag {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 12px;
}

/* 卡片内容样式 */
.card-content.modern {
  margin-bottom: 25px;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.info-item.modern {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.info-item.modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.info-item.modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.info-item.modern:hover::before {
  opacity: 1;
}

.info-item.modern.wide {
  grid-column: 1 / -1;
}

.info-icon {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.info-icon.age {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
}



.info-icon.class {
  background: linear-gradient(135deg, #45b7d1 0%, #96c93d 100%);
}

.info-icon.phone {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.info-icon.email {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.info-icon.address {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.info-details {
  flex: 1;
  min-width: 0;
}

.info-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #909399;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-value {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 卡片操作按钮样式 */
.card-actions.modern {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding-top: 20px;
  border-top: 1px solid #e9ecef;
}

.card-action-btn {
  min-width: 120px;
  height: 44px;
  border-radius: 16px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.edit-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.edit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.view-btn {
  background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
  color: white;
}

.view-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(108, 117, 125, 0.4);
}

.delete-btn {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: white;
}

.delete-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(231, 76, 60, 0.4);
}

/* 空状态样式 */
.empty-state.modern {
  text-align: center;
  padding: 60px 40px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 20px;
  opacity: 0.6;
}

.empty-title {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 12px 0;
}

.empty-description {
  font-size: 16px;
  color: #7f8c8d;
  margin: 0;
}

/* 卡片动画 */
.card-list-enter-active {
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-list-leave-active {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-list-enter-from {
  opacity: 0;
  transform: translateY(30px) scale(0.9);
}

.card-list-leave-to {
  opacity: 0;
  transform: translateY(-30px) scale(0.9);
}

.card-list-move {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 渐隐动画 */
.fade-enter-active, .fade-leave-active {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .teacher-cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .page-header {
    padding: 20px;
  }
  
  .header-content {
    flex-direction: column;
    gap: 20px;
  }
  
  .content-section {
    padding: 0 20px;
  }
  
  .teacher-cards-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .header-actions {
    margin: 0 20px 20px 20px;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .card-actions.modern {
    flex-direction: column;
  }
  
  .card-action-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .teacher-card.modern {
    padding: 20px;
  }
  
  .card-header.modern {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
}
</style>
